    <style include="cr-shared-style shared-style">
      :host {
        color: var(--cr-primary-text-color);
        display: block;
        height: 100%;
        line-height: 1.54;  /* 20px. */
        overflow: hidden;
      }

      #main-container {
        display: flex;
        height: calc(100% - var(--toolbar-height));
        position: relative;
      }

      #content {
        flex: 1;
        min-width: 0;
      }

      #content,
      #content > * {
        height: 100%;
      }

      #tabs-container {
        --cr-tabs-height: 48px;
        --tabs-margin-top: 16px;
      }

      #tabs {
        --cr-tabs-icon-margin-end: 12px;
        --cr-tabs-selection-bar-width: 3px;
        --cr-tabs-tab-inline-padding: 16px;
        display: flex;
        justify-content: center;
        margin-top: var(--tabs-margin-top);
      }

      #tabs-content,
      #tabs-content > * {
        height: 100%;
      }

      :host([show-history-clusters_]) #tabs-content {
        height: calc(100% - var(--cr-tabs-height) - var(--tabs-margin-top));
      }

      :host([toolbar-shadow_]) #drop-shadow {
        opacity: var(--cr-container-shadow-max-opacity);
      }
    </style>
    <history-query-manager query-state="{{queryState_}}"
        query-result="{{queryResult_}}"
        router="[[$$('#router')]]"
        on-query-finished="onQueryFinished_">
    </history-query-manager>
    <history-router id="router"
        selected-page="{{selectedPage_}}"
        query-state="[[queryState_]]">
    </history-router>
    <history-toolbar id="toolbar"
        has-drawer="[[hasDrawer_]]"
        has-more-results="[[!queryResult_.info.finished]]"
        pending-delete="[[pendingDelete_]]"
        query-info="[[queryResult_.info]]"
        querying="[[queryState_.querying]]"
        search-term="[[queryState_.searchTerm]]"
        spinner-active="[[shouldShowSpinner_(queryState_.querying,
                                             queryState_.incremental,
                                             queryState_.searchTerm)]]">
    </history-toolbar>
    <div id="drop-shadow" class="cr-container-shadow"></div>
    <div id="main-container">
      <history-side-bar id="content-side-bar" selected-page="{{selectedPage_}}"
          selected-tab="{{selectedTab_}}"
          footer-info="[[footerInfo]]"
          history-clusters-enabled="[[historyClustersEnabled_]]"
          history-clusters-visible="{{historyClustersVisible_}}"
          hidden$="[[hasDrawer_]]">
      </history-side-bar>
      <iron-pages id="content" attr-for-selected="path"
          fallback-selection="history"
          selected="[[getSelectedPage_(selectedPage_, items)]]"
          on-selected-item-changed="updateScrollTarget_"
          items="{{items}}">
        <div id="tabs-container" path="history">
          <template is="dom-if" if="[[showHistoryClusters_]]">
            <div id="tabs">
              <cr-tabs tab-names="[[tabsNames_]]"
                  tab-icons="[[tabsIcons_]]"
                  selected="{{selectedTab_}}">
              </cr-tabs>
            </div>
          </template>
          <iron-pages id="tabs-content" attr-for-selected="path"
              fallback-selection="history"
              selected="[[getSelectedPage_(selectedPage_, items)]]"
              on-selected-item-changed="updateScrollTarget_"
              items="{{items}}">
            <history-list id="history" query-state="[[queryState_]]"
                searched-term="[[queryResult_.info.term]]"
                pending-delete="{{pendingDelete_}}"
                query-result="[[queryResult_]]"
                path="history">
            </history-list>
            <template is="dom-if"
                if="[[historyClustersSelected_(selectedPage_, showHistoryClusters_)]]">
              <history-clusters id="history-clusters"
                  query="[[queryState_.searchTerm]]"
                  path="journeys">
              </history-clusters>
            </template>
          </iron-pages>
        </div>
        <template is="dom-if" if="[[syncedTabsSelected_(selectedPage_)]]">
          <history-synced-device-manager id="synced-devices"
              session-list="[[queryResult_.sessionList]]"
              search-term="[[queryState_.searchTerm]]"
              sign-in-state="[[isUserSignedIn_]]"
              path="syncedTabs">
          </history-synced-device-manager>
        </template>
      </iron-pages>
    </div>

    <cr-lazy-render id="drawer">
      <template>
        <cr-drawer heading="$i18n{title}" align="$i18n{textdirection}">
          <history-side-bar id="drawer-side-bar" slot="body"
              selected-page="{{selectedPage_}}"
              selected-tab="{{selectedTab_}}"
              history-clusters-enabled="[[historyClustersEnabled_]]"
              history-clusters-visible="{{historyClustersVisible_}}"
              footer-info="[[footerInfo]]">
          </history-side-bar>
        </cr-drawer>
      </template>
    </cr-lazy-render>

    <iron-media-query query="(max-width: 1023px)"
        query-matches="{{hasDrawer_}}">
    </iron-media-query>
